<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.*"%>
<%@page import="org.liufeng.course.util.StrTools"%> 
<%@page import=" java.text.SimpleDateFormat"%> 
 <%@page import="  java.lang.Math"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String stcd = StrTools.doNull(request.getParameter("stcd"),"1");
String type  = StrTools.doNull(request.getParameter("type"),"1");
String TMType = "1";
String st  = StrTools.doNull(request.getParameter("st"),"");
String et  = StrTools.doNull(request.getParameter("et"),"");

SimpleDateFormat dateformat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String today=et.equals("")?dateformat.format(new Date()):et;
String strDay = today;
String name = StrTools.doNull(request.getParameter("name"),"奉化");
try{
	Calendar c = Calendar.getInstance();
	c.setTime(dateformat.parse(today));
	c.add(Calendar.DAY_OF_MONTH, -1);
	strDay=st.equals("")?dateformat.format(c.getTime()):st;
	if((dateformat.parse(today).getTime()-dateformat.parse(strDay).getTime())/(1000*60*60*24)>1){//周报
		TMType = "2";
	}
	System.out.print((dateformat.parse(today).getTime()-dateformat.parse(strDay).getTime())/(1000*60*60*24)+"*****");
	System.out.print((dateformat.parse(today).getTime()-dateformat.parse(strDay).getTime())/(1000*60*60*24)>=30);
	
}catch(Exception e){
	out.print("出错啦~~");
	
}

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>过程曲线报表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />   
	<meta name="apple-mobile-web-app-capable" content="yes" /> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script src="dev/jquery-1.9.1.js"></script>
    <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
	<link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
	<link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
	<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
	<!-- S 可根据自己喜好引入样式风格文件 -->
	<script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
	<link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
            background: #ddd;
        }
        input, select {
            width: 100%;
            padding: 5px;
            margin: 5px 0;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-radius: 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-border-radius: 5px;
        }
        .header {
            border: 1px solid #333;
            background: #111;
            color: white;
            font-weight: bold;
            text-shadow: 0 -1px 1px black;
            background-image: linear-gradient(#3C3C3C,#111);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
            background-image: -moz-linear-gradient(#3C3C3C,#111);
        }
        .header h1 {
            text-align: center;
            font-size: 16px;
            margin: .6em 0;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .content {
            padding: 15px;
            background: #fff;
        }
       
    </style>

	<script type="text/javascript">
function strToJson(str){   
     var json = eval(str);  
     return json;   
}

	var stcd = '<%=stcd%>';
	var st = '<%=strDay%>';
	var et = '<%=today%>';
	var TMType = '<%=TMType%>';
	var name ='<%=name%>';
	
$(function () {
   Highcharts.setOptions({
   global: {
		useUTC: false 
	},
	lang: {
		decimalPoint : ".",  
 
        months: ['1月', '2月','3月', '4月', '5月', '6月',  
                 '7月', '8月','9月', '10月', '11月', '12月'],          
		weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
		}
  	});
  	
	//returnjs();
	returnsw();
	mobileTime();
 });
 
 function tzmore(){
			var st1 = $('#beginDateTime').val()+':00';
			var et1 = $('#endDateTime').val()+':00';
			if(st1==''||st1==':00'){
				st1 = '';
			}
			if(et1==''||et1==':00'){
				et1 = '';
			}
			window.location.href = "chart5.jsp?stcd="+stcd+"&st="+st1+"&et="+et1+"&STNM=<%=name%>";
				//传参数第一个参数传递要带?,多余一个都用&链接传递
}

function mobileTime(){
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			opt.datetime = { preset : 'datetime', minDate: new Date(2000,1,1,0,0), maxDate: new Date(2015,1,1,0,0), stepMinute: 5  };
			//opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'mixed', //日期选择模式
				lang:'zh',
		        startYear:currYear - 10, //开始年份
		        endYear:currYear + 10 //结束年份
			};

			$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#beginDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#endDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#appTime").mobiscroll(optTime).time(optTime);
			
			//下面注释部分是上面的参数可以替换改变它的样式
			//希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
			// 直接写参数方法
			//$("#scroller").mobiscroll(opt).date(); 
			// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
			//具体参数定义如下
		    //{
		    //preset: 'date', //日期类型--datatime --time,
		    //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
										//【wp light】【wp】
		    //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
		    //display: 'modal', //显示方【modal】【inline】【bubble】【top】【bottom】
		    //dateFormat: 'yyyy-mm-dd', // 日期格式
		    //setText: '确定', //确认按钮名称
		    //cancelText: '清空',//取消按钮名籍我
		    //dateOrder: 'yymmdd', //面板中日期排列格
		    //dayText: '日', 
		    //monthText: '月',
		    //yearText: '年', //面板中年月日文字
		    //startYear: (new Date()).getFullYear(), //开始年份
		    //endYear: (new Date()).getFullYear() + 9, //结束年份
		    //showNow: true,
		    //nowText: "明天",  //
		    //showOnFocus: false,
		    //height: 45,
		    //width: 90,
		    //rows: 3}
  }
			
			
function returnsw(){
	var url = "http://fhs.fxpt.org:8090/HyDroDataService/service/queryRRChartProcess.action?stcd="+stcd+"&st="+st+"&et="+et+"&TMType="+TMType;
	$.ajax({
	dataType: 'jsonp',
	url: url,
	success: function(data){
		 var dataobj = data[0].data;
		 var  dataobj1 = data[1].data;
//		var dataobj2 = data[2].data;
//		var dataobj3 = data[3].data;
//		var dataobj4 = data[4].data;
		var dataobj5 = data[5].data;

//			charts(dataobj,dataobj1,dataobj2,dataobj3,dataobj4,dataobj5);
		charts(dataobj,dataobj1);

		}
	});
}

/*function returnjs() {
	var jsurl = "http://fhs.fxpt.org:8090/HyDroDataService/service/queryPPChartProcess.action?stcd="+stcd+"&st="+st+"&et="+et+"&TMType="+TMType;
	$.ajax({
	dataType: 'jsonp',
	url: jsurl,
	success: function(data){
		 var dataobjjs = data[0].data;
		 var dataobjjs1 = data[1].data;
		charts1(dataobjjs,dataobjjs1);
		}
	});
}
*/
function charts(data1,data2) {
         $('#container').highcharts({
        credits: {
            enabled: false
       	 },
        chart: {
            type: 'xy'
            
        },
        
        title: {
            text: name+'水库'
        },
        subtitle: {
            text: '水位、库容变化曲线'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                 day: '%m/%d',
            rotation: 90
                
            }
        },
        
            yAxis: [{ // Primary yAxis
            	minRange: 0.1,
            	offset: 0,
            	lineWidth: 1,

                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    },
                    floor: null,
                    rotation:270,
                    x: 10
                                        
                },
                title: {
                    text: '水位（m）',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
            	minRange: 1,
            	offset: 0,
            	lineWidth: 1,

                title: {
                    text: '库容（万m³）',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value}',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    },
                    rotation:90,
                    x: -10
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
       
            legend: {
                layout: 'horizontal',
                align: 'center',
                x: 0,
                verticalAlign: 'top',
                y: 50,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            
            plotOptions: {
            spline: {
                connectNulls: true
            },   
            areaspline: {
            	fillOpacity: 0.5,
            	connectNulls: true,
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 3,
                marker: {
                    enabled: true
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
            series: [{
                name: '水位',
                type: 'spline',
                color: '#000000',                
                data: data1,
                tooltip: {
                    valueSuffix: 'm'
                }
    
            }, {
                name: '库容',
                type: 'areaspline',
                yAxis: 1,
                data: data2,
                color: '#FF0000',
                tooltip: {
                    valueSuffix: '万m³'
                }
            }]
        });
};
function charts1(data1,data2) {
         $('#container1').highcharts({
        credits: {
            enabled: false
       	 },
        chart: {
            type: 'xy'
        },
        title: {
            text: name+'降雨量及累积降雨量'
        },
        subtitle: {
            text: '奉化市水利局'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                 day: '%m/%d'
                
            }
        },
        
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}mm',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '降雨量',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: '降雨量',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value}mm ',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
       
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 100,
                verticalAlign: 'top',
                y: 50,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'E8E8E8'
            },
            
            plotOptions: {
            areaspline: {
            	connectNulls: true,
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
            series: [{
                name: '即时雨量',
                type: 'column',
                data: data1,
                tooltip: {
                    valueSuffix: 'mm'
                }
    
            },{
                name: '累积雨量',
                type: 'areaspline',
                data: data2,
                tooltip: {
                    valueSuffix: 'mm'
                }
            }]
        });
};
		</script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
	</head>
<body>
  <div id="container" style="width:100%"></div>
	<!-- 手机选日期 strate -->
	<div align="center" style="width:100%">
		<div align="center" class="beginDateTime" style="width:90%">
			<label for="beginDateTime">需查询的开始日期及时间</label>
			<input type="text" name="beginDateTime" id="beginDateTime" />
		</div>
		<div align="center" class="endDateTime" style="width:90%">
			<label for="endDateTime">需查询的结束日期及时间</label>
			<input type="text" name="endDateTime" id="endDateTime" />
		</div>
		<div align="center" style="width:90%">
			<input type="button" value="点击查询水位过程线" onClick="tzmore()" />
		</div>
	</div>
	<!-- 手机选日期 end -->
</body>
</html>
<script>
	
</script>